অ্যাডভান্সড সিলেক্টরস: অ্যাট্রিবিউট, হায়ারার্কি, পসিশন

jQuery-র অ্যাডভান্সড সিলেক্টরস বিভিন্ন ধরনের এবং বিশেষ ক্ষেত্রের সিলেক্টর হিসাবে কাজ করে। এগুলো ব্যবহার করে আপনি অ্যাট্রিবিউট অনুযায়ী, হায়ারার্কি বা ডকুমেন্টের গঠন অনুসারে, এবং এলিমেন্টের পজিশন অনুযায়ী নির্দিষ্ট এলিমেন্টগুলোকে সিলেক্ট করতে পারেন। এই সিলেক্টরগুলো জটিল কাজগুলোকে সহজ এবং কার্যকর করে তোলে।

১. অ্যাট্রিবিউট সিলেক্টরস (Attribute Selectors)

অ্যাট্রিবিউট সিলেক্টরগুলি এমন এলিমেন্টগুলি খুঁজে পায় যাদের নির্দিষ্ট অ্যাট্রিবিউট রয়েছে অথবা যাদের অ্যাট্রিবিউটের মান নির্দিষ্ট কিছু অনুসারে সেট করা হয়েছে।

উদাহরণসমূহ:

• [attribute]: যে কোনো এলিমেন্ট যার নির্দিষ্ট অ্যাট্রিবিউট আছে।

  $("a[href]").css("color", "red"); // সব 'a' ট্যাগ যাদের 'href' অ্যাট্রিবিউট আছে।
  

• [attribute="value"]: যে কোনো এলিমেন্ট যাদের অ্যাট্রিবিউটের মান নির্দিষ্ট মূল্যের সাথে মিলে।

  $("input[type='text']").val("Hello World!"); // সব 'input' টাইপ যেগুলি 'text'।
  

• [attribute^="value"]: যে কোনো এলিমেন্ট যাদের অ্যাট্রিবিউট মান নির্দিষ্ট মূল্য দিয়ে শুরু হয়।

  $("a[href^='https']").css("color", "green"); // সব 'a' ট্যাগ যাদের 'href' HTTPS দিয়ে শুরু হয়।
  

• [attribute$="value"]: যে কোনো এলিমেন্ট যাদের অ্যাট্রিবিউট মান নির্দিষ্ট মূল্যে শেষ হয়।

  $("a[href$='.pdf']").css("color", "blue"); // সব 'a' ট্যাগ যাদের 'href' PDF ফাইলে শেষ হয়।
  

২. হায়ারার্কি সিলেক্টরস (Hierarchy Selectors)

হায়ারার্কি সিলেক্টরগুলি নির্দিষ্ট প্যারেন্ট-চাইল্ড সম্পর্ক অনুযায়ী এলিমেন্টগুলি খুঁজে পায়।

উদাহরণসমূহ:

• parent > child: সরাসরি চাইল্ড এলিমেন্টগুলি।

  $("div > p").css("color", "red"); // সব 'div' যার সরাসরি চাইল্ড 'p'।
  

• ancestor descendant: যেকোনো ডেপথের চাইল্ড এলিমেন্টগুলি।

  $("#main div").css("color", "blue"); // 'main' এর অধীনে যেকোনো ডেপথে 'div'।
  

• prev + next: সরাসরি পরবর্তী সিবলিং এলিমেন্ট।

  $("label + input").val("Sibling Input"); // সব 'label' এর পরের 'input'।
  

• prev ~ siblings: সমস্ত সিবলিং এলিমেন্টগুলি যা নির্দিষ্ট এলিমেন্টের পরে আসে।

  $("h1 ~ p").css("color", "green"); // 'h1' এর পরে আসা সব 'p'।
  

৩. পজিশন সিলেক্টরস (Position Selectors)

পজিশন সিলেক্টরগুলি নির্দিষ্ট অবস্থানের ভিত্তিতে এলিমেন্টগুলি খুঁজে পায়।

উদাহরণসমূহ:

• :first: নির্দিষ্ট সেটের প্রথম এলিমেন্ট।

  $("ul li:first").css("color", "red"); // প্রথম 'li'।
  

• :last: নির্দিষ্ট সেটের শে

ষ এলিমেন্ট।

$("ul li:last").css("color", "blue"); // শেষ 'li'।

• :eq(index): নির্দিষ্ট ইনডেক্সের এলিমেন্ট (০ থেকে শুরু)।

  $("ul li:eq(2)").css("color", "green"); // তৃতীয় 'li'।
  

• :odd / :even: বিজোড় / জোড় ইনডেক্সের এলিমেন্ট।

  $("ul li:odd").css("color", "purple"); // বিজোড় ইনডেক্সের 'li'।
  $("ul li:even").css("color", "cyan"); // জোড় ইনডেক্সের 'li'।
  

jQuery-র অ্যাডভান্সড সিলেক্টরগুলি ওয়েব ডেভেলপারদের জটিল সিলেক্টর প্যাটার্নগুলি সহজে ব্যবহার করতে সাহায্য করে, যা অন্যান্য জাভাস্ক্রিপ্ট মেথডগুলির চেয়ে অনেক বেশি কার্যকর এবং সহজ। এই সিলেক্টরগুলি ব্যবহার করে আপনি আপনার ডকুমেন্টের যেকোনো অংশে দ্রুত এবং নির্ভুলভাবে অ্যাক্সেস পেতে পারেন।